<script setup lang="ts">
// 局部注册组件，需要单独引用组件样式
// 只提供局部引用的方式，不再采用插件形式，方便按需加载，减少主包大小
import SlideVerify, { type SlideVerifyInstance } from 'vue3-slide-verify';
import "vue3-slide-verify/dist/style.css";
import axios  from "axios";
import {onMounted, ref} from "vue";
const prop = defineProps({
  verify:{
    type:Function,
  },
  setVerify:{
    type:Function,
  }
})
const imgs = ref<String[]>([]);
onMounted(() => {
  axios.get('https://api.vvhan.com/api/money').then(res => {
    imgs.value.push(res.data.img)
  })
})
const onSuccess = () => {
  prop.verify()
  prop.setVerify(false)
}
const onFail = () => {
  console.log('fail')
  // prop.setVerify(false)
}
const onRefresh = () => {
  console.log('refresh')
}
//	检测到非人为操作滑动时触发的回调函数
const onAgain = () => {
  console.log('again')
}
</script>

<template>
  <div class="verify">
    <slide-verify
        style="margin-right: 15px"
        ref="block"
        :slider-text="'向右滑动->'"
        :accuracy="100"
        @again="onAgain"
        @success="onSuccess"
        :imgs="imgs"
        @fail="onFail"
        @refresh="onRefresh"
    ></slide-verify>
  </div>
</template>
<style scoped lang="scss">

</style>
